<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
export default {
  components: {},
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    setRem() {
      //  PC端
      console.log('非移动设备');
      // 基准大小
      this.baseSize = 100;
      let basePc = this.baseSize / 1920; // 表示1920的设计图,使用100PX的默认值
      let vW = window.innerWidth; // 当前窗口的宽度
      let vH = window.innerHeight; // 当前窗口的高度
      // 非正常屏幕下的尺寸换算
      let dueH = (vW * 1080) / 1920;
      if (vH < dueH) {
        // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
        vW = (vH * 1920) / 1080;
      }
      let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
      document.documentElement.style.fontSize = rem + 'px';
    }
  },
  created() {
    this.setRem();
  },
  mounted() {
    let _that = this;
    window.onresize = function () {
      console.log('我执行了');
      _that.setRem();
    };
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>
